<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src='./src/vue.js'></script>
	</head>

	<body>
		<div id="app">
			<input v-model="message" />
			<p>{{message}}</p>
			<p id="remove">解绑</p>
			<button @click='show = !show'>控制渲染不渲染</button>
			<h2>子组件</h2>
			<custom v-if="show"></custom>
		</div>
		
		<script>

			Vue.component('custom',{
				template: `<div>hello</div>`,
				data(){
					return {
						message: '子数据'
					}
				},
				beforeCreate(){
					console.group('---beforeCreate---');
					console.log(this.message);
					console.log(this.$el);
					console.groupEnd('---beforeCreate---');
				},
				created(){
					console.group('---created---');
					console.log('发送ajax');
					/*setTimeout( () => {
						this.message = 123;
					},1000)*/
					console.log(this.message);
					console.log(this.$el);
					console.groupEnd('---created---');
				},
				beforeMount(){
					console.group('---beforeMount---');
					console.log(this.message);
					console.log(this.$el);
					console.log(this.$el);
					console.groupEnd('---beforeMount---');
				},
				mounted(){
					console.group('---mounted---');
					console.log(this.message);
					console.log('操作dom');
					console.log(this.$el);
					this.__handle__ = function (){
						console.log(123);	
					}
					document.addEventListener('click',this.__handle__)
					console.groupEnd('---mounted---');
				},
				beforeUpdate(){
					console.group('---beforeUpdated---');
					console.log(this.message);
					console.log(this.$el);
					console.groupEnd('---beforeUpdated---');
				},
				updated(){
					console.group('---updated---');
					console.log(this.message);
					console.log(this.$el);
					console.groupEnd('---updated---');
				},
				beforeDestroy(){
					console.group('---beforeDestroy---');
					console.log(this.message);
					console.log(this.$el);
					console.groupEnd('---beforeDestroy---');
				},
				destroyed(){
					console.group('---destroyed---');
					console.log(this.message);
					console.log(this.$el);
					document.removeEventListener('click',this.__handle__)
					console.groupEnd('---destroyed---');
				}
			})

			let vm = new Vue({
				//el:'#app',
				data:{
					message: 'hello',
					show: true
				}
			})

			vm.$mount('#app');

			/*document.getElementById('remove').onclick = function (){
				vm.$destroy();  // 销毁这个实例	
			}*/

			//console.log(vm.$el);
		</script>
	</body>
</html>